import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Button } from "antd-mobile";
import { LeftOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
import "../style.css";
function Details() {
  const [data, setData] = useState([]);
  const navigate = useNavigate();
  let location = useLocation();
  const handBut = () => {
    navigate("/wxq/ord/record", {
      state: location.state,
    });
  };

  const handBut2 = () => {
    navigate("/lookhome");
  };
  return (
    <div>
      <div className="inp">
        <LeftOutline
          onClick={() => navigate("/wxq/ord")}
          className="inp1"
          color="#E3E8EA"
          style={{ fontSize: 25 }}
        />
        <h2>任务详情</h2>
      </div>
      <div>
        <div className="boxDet1">
          <h3>
            {/* {location.state.state == "待抢单" ? "未抢单" : "未预约"} */}
            {location.state.state == "待预约"
              ? "立即预约"
              : location.state.state == "待抢单"
              ? "立即抢单"
              : location.state.state == "待测量"
              ? "立即测量"
              : location.state.state == "待外出"
              ? "立即外出"
              : ""}
          </h3>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p style={{ color: "#868686" }}>抢单成功后，第一时间联系客户哦!!</p>
            <p style={{ color: "red" }}>￥{location.state.price}</p>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-evenly",
              marginTop: "1.2rem",
            }}
          >
            <Button
              className="butde"
              onClick={() => {
                handYbut(item);
              }}
              color="default"
              fill="outline"
              size="small"
            >
              预约纪录
            </Button>
            {location.state.state === "待抢单" ? 
              <Button color="primary" fill="outline" size="small">
                确认抢单
              </Button>
             : location.state.state === "待预约" ?
              <Button
                color="primary"
                fill="outline"
                size="small"
                onClick={() => {
                  handBut();
                }}
              >
                确认预约
              </Button>
              : location.state.state === "待测量" ?

              <Button
                color="primary"
                fill="outline"
                size="small"
                onClick={() => {
                  handBut2();
                }}
              >
                确认测量
              </Button> : ""
            }
          </div>
        </div>
      </div>
      <div className="h"></div>
      <div className="detXq">
        <p style={{ fontSize: "1.6rem", paddingBottom: "2rem" }}>预订单详情</p>
        <hr style={{ background: "#F2F2F2" }}></hr>
        <div className="detXqitem">
          <div
            style={{
              display: "flex",
              width: "18rem",
              justifyContent: "space-around",
            }}
          >
            <p>门扇</p>
            <p>原木门</p>
            <p>YM-12门扇</p>
          </div>
          <div>
            <p>X5</p>
          </div>
        </div>
        <div className="detXqitem">
          <div
            style={{
              display: "flex",
              width: "20rem",
              justifyContent: "space-around",
            }}
          >
            <p>墙板</p>
            <p>平墙板</p>
            <p>PB02-LR-12墙板</p>
          </div>
          <div>
            <p>X4</p>
          </div>
        </div>
        <div className="detXqitem">
          <div
            style={{
              display: "flex",
              width: "18rem",
              justifyContent: "space-around",
            }}
          >
            <p>吊顶</p>
            <p>扣板吊顶</p>
            <p>KB01A扣板</p>
          </div>
          <div>
            <p>X8</p>
          </div>
        </div>
        <div className="detXqitem">
          <div
            style={{
              display: "flex",
              width: "18rem",
              justifyContent: "space-around",
            }}
          >
            <p>柜类</p>
            <p>书柜</p>
            <p>MT-G02-Z51书柜</p>
          </div>
          <div>
            <p>X9</p>
          </div>
        </div>
        <div className="detButton">
          <p>展开更多</p>
        </div>
      </div>
      <div className="h"></div>

      <div>
        <div className="detXq">
          <p style={{ fontSize: "1.6rem", paddingBottom: "2rem" }}>任务详情</p>
        </div>
        <hr></hr>
        <div>
          <div className="ordItemLeft">
            <p className="ordItemLeftTitle">发布日期</p>
            <p className="ordItemLeftTitle">测量日期</p>
          </div>
          <div className="ordItemLeft">
            <p className="ordItemLeftTitles">
              {dayjs(location.state.rtime).format("MM-DD")}日
            </p>
            <p className="ordItemLeftTitles">
              {dayjs(location.state.ttime).format("MM-DD")}日
              <span className="spans">8-10点</span>
            </p>
          </div>
          <div style={{ width: "100%", height: "1rem" }}></div>

          <hr></hr>
          <div className="ordItemLeftsrq">
            <p>测量地址</p>
            <p>{location.state.address}</p>
          </div>
          <div className="h"></div>
        </div>
      </div>
      <div>
        <div className="ordItemLeftsr">
          <div>
            <p>客户</p>
          </div>
          <div>
            <p>{location.state.customer}</p>
            <p>{location.state.cprint}</p>
          </div>
        </div>
        <div style={{ width: "100%", height: "1rem" }}></div>

        <hr></hr>
        <div className="ordItemLeftsr">
          <div>
            <p>导购</p>
          </div>
          <div>
            <p>{location.state.ShoopG}</p>
            <p>{location.state.sprint}</p>
          </div>
        </div>
      </div>
      <div style={{ width: "100%", height: "1rem" }}></div>

      <hr></hr>
    </div>
  );
}

export default Details;
